<template>
  <div>
    <div class="login" :phone="this.phone">
      <!-- 主体部分 -->
      <div class="login-con">
        <div class="login-header">
          <router-link to=""
            ><img src="../../public/img/login/logo.png" alt="" class="logo-img"
          /></router-link>
          <span class="wc-word"> 欢迎登陆 </span>
        </div>
        <div class="log-con">
          <div class="logRight">
            <p title="tit-p">登录</p>
            <!-- 输入密码 -->
            <ul>
              <!-- 账号部分 -->
              <li>
                <span>账号</span>
                <p>
                  <i class="el-icon-user-solid"></i>
                  <input
                    type="text"
                    placeholder="账号/手机号"
                    v-model="phone"
                  />
                </p>
                <div id="nameTitle" :class="phoneClass">
                  {{ phoneMsg }}
                </div>
              </li>
              <!-- 密码部分 -->
              <li>
                <span>密码</span>
                <p>
                  <i class="el-icon-unlock"></i>
                  <input type="password" placeholder="密码" v-model="pwd" />
                </p>
                <div id="passwordTitle" :class="pwdClass">
                  {{ pwdMsg }}
                </div>
              </li>
              <!-- 忘记密码 -->
              <li class="forget-pswd">
                <a href="#" class="log-forget">忘记密码?</a>
              </li>
              <!-- 按钮 -->
              <li>
                <button class="login-btn" @click="login">立即登录</button>
              </li>
            </ul>
            <!-- 登录框下部 -->
            <div class="log-div">
              <div class="log-div-left">短信验证码登录</div>
              <div class="log-div-right">
                <router-link to="/register">立即注册</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
// import {mapMutations} from "vuex";
import { mapActions } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      phone: "",
      phoneMsg: "",
      phoneClass: {
        hidden1: false,
        hidden2: false,
      },
      pwd: "",
      pwdMsg: "",
      pwdClass: {
        hidden1: false,
        hidden2: false,
      },
    };
  },
  watch: {
    phone() {
      var reg = /^1[3-9]\d{9}$/;
      var result = reg.test(this.phone);
      if (result === true) {
        this.phoneClass = {
          hidden1: true,
          hidden2: false,
        };
        this.phoneMsg = "手机号格式正确";
      } else {
        this.phoneClass = {
          hidden1: false,
          hidden2: true,
        };
        this.phoneMsg = "手机号格式不正确";
      }
    },
    pwd() {
      var reg = /^\d{6}$/;
      var result = reg.test(this.pwd);
      console.log(result);
      if (result === true) {
        this.pwdClass = {
          hidden1: true,
          hidden2: false,
        };
        this.pwdMsg = "密码格式正确";
      } else {
        this.pwdClass = {
          hidden1: false,
          hidden2: true,
        };
        this.pwdMsg = "密码格式不正确";
      }
    },
  },
  methods: {
    ...mapActions(["vlogin"]),
    // login() {
    //   axios
    //     .post("/users/login", { phone: this.phone, upwd: this.pwd })
    //     .then((result) => {
    //       console.log(result.data);
    //       if (result.data.code === 200) {
    //         // this.logined(`${this.phone}`);
    //         this.$store.commit("logined",this.phone);
    //         this.$router.push(`/`);
    //       } else {
    //         alert(`登录失败`);
    //       }
    //     });
    // },
    login() {
      // 异步执行并验证账号
      this.vlogin({
        phone: this.phone,
        upwd: this.pwd,
      })
        .then(() => {
          sessionStorage.setItem("islogin", true);
          sessionStorage.setItem("phone", this.phone
          );
          this.$router.push(`/`);
          // alert(`登陆成功`)
        })
        .catch((msg) => {
          alert(`${msg}`);
        });
    },
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "微软雅黑";
}

a {
  text-decoration: none;
}

.login {
  width: 100%;
  padding: 30px 0;
  background: url(../../public/img/login/logImg.png) top center;
}

.login .login-con {
  width: 1200px;
  margin: 0 auto;
}

.login .login-header {
  height: 58px;
  line-height: 58px;
  margin-bottom: 30px;
}

.logo-img {
  background-size: 90% 90% !important;
  width: 165px;
  height: 60px;
  float: left;
  margin-top: 0 !important;
}

.login-header span {
  font-size: 28px;
  border-left: 1px solid #ddd;
  padding: 0 20px;
  float: left;
  color: #666;
  margin-left: 20px;
}

.login .log-con {
  margin-top: 75px;
  padding: 20px;
  overflow: hidden;
  border-radius: 5px 5px;
}

/* 主体部分 */
.login .login-con .logRight {
  float: right;
  margin-left: 20px;
  width: 330px;
  height: 400px;
  position: relative;
  background: #fff;
}

.logRight > p {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #f6f6f6;
  margin-bottom: 10px;
}

.logRight > ul {
  list-style: none;
  width: 80%;
  margin: 0 auto;
}

.logRight > ul li {
  width: 100%;
}

.log-con .logRight ul li span {
  font-size: 14px;
  color: #555;
  display: inline-block;
  margin-bottom: 5px;
  margin-left: 3px;
}

/* 输入框 */
.login .log-con .logRight ul li p input {
  width: 240px;
  height: 30px;
  padding-left: 24px;
  font-size: 14px;
  color: #333;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  
}

.login .log-con .logRight ul li p {
  width: 100%;
  margin-bottom: 0;
  position: relative;
}
.login .log-con .logRight ul li p input:hover {
  border: 1px solid #333333;
}
.hidden1 {
  text-align: center;
  color: green;
  font-size: 12px;
  margin-top: 10px;
  height: 20px;
  line-height: 20px;
  
}
.hidden2 {
  text-align: center;
  color: #e4393c;
  font-size: 12px;
  margin-top: 5px;
  height: 20px;
  line-height: 20px;
}

/* 忘记密码 */
.login .log-con .logRight ul li .log-forget {
  float: right;
  font-size: 13px;
  color: #666;
}

.forget-pswd {
  margin: 0 !important;
  overflow: hidden;
}

.login .log-con .logRight ul li .log-forget:hover {
  color: #ff5b00;
  text-decoration: none;
}

/* .hidden1 {
  visibility: hidden;
}
.hidden2 {
  visibility: hidden;
} */

/* 登录按钮 */
.login .log-con .logRight ul li .login-btn {
  width: 268px;
  display: inline-block;
  height: 40px;
  background: #d61a39;
  outline: none;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

.log-div {
  width: 100%;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #f6f6f6;
  bottom: 0px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  width: 100%;
}

.log-div .log-div-left {
  font-size: 14px;
  color: #666;
  font-weight: bold;
  margin-left: 30px;
  height: 50px;
  line-height: 50px;
}

.log-div .log-div-right {
  margin-left: 30px;

  line-height: 50px;
}
.log-div .log-div-right a {
  text-decoration: none;
  font-size: 14px;
  color: #cc1f3a;
  font-weight: bold;
  height: 50px;
}
</style>